﻿@{
    ViewBag.Title = "UITemplates";
    Layout = "~/Views/Master/_LoggedInLayout.cshtml";
}
@section RootBreadCrumb {
Overview
}
@section headerscripts{
    <script type="text/javascript">
        //General functions~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        var entryLinkUrl = "/UITemplateEditor/UITemplateEditor/";

        function calcWidth() {
            //Set width for ModelsBox
            var containerWidth = $(".OuterContentArea .InnerContentArea").width();
            var marginWidth = 30;
            var actionsBoxWidth = $("#UITemplatesActionsBox").width();
            var templatesBoxWidth = containerWidth - marginWidth - actionsBoxWidth;
            $('#UITemplatesBox').css("width", templatesBoxWidth + "px");
        }
        function deleteUITemplate(uiTemplateID) {
            var tbody = $("#UITemplatesTable").children("tbody");
            //Delete Model from DB
            $.ajax({
                url: "/UITemplates/DeleteUITemplate",
                data: JSON.stringify({ ID: uiTemplateID }),
                success: function (reponse) {
                    //
                    deleteRow(uiTemplateID, tbody);
                }
            });
        }
        function addNewUITemplate() {
            //Create new Model in DB
            $.ajax({
                url: "/UITemplates/AddNewUITemplate",
                data: {},
                success: function (dataObj) {
                    //
                    var table = $("#UITemplatesTable");
                    var headerColumns = $(table).find("th");
                    var tbody = $(table).children("tbody");

                    var tr = createRow(headerColumns, tbody, dataObj, entryLinkUrl, deleteUITemplate);
                    $(tr).children("td").effect("highlight", { color: "yellow" }, 1000);
                }
            });
        }
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //Load~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        $(document).ready(function () {

            //Event handlers-------------------------------------------------------------------
            $("#NewUITemplateButton").bind("click", function () {
                addNewUITemplate();
            });
            //---------------------------------------------------------------------------------

            //Initialize
            calcWidth();
            $(window).resize(function () {
                calcWidth();
            });
            $("#UITemplatesMenuItem").attr("selected", "selected");

            //Load UITemplates
            $.ajax({
                url: "/UITemplates/GetUITemplates",
                data: {},
                beforeSend: function () {
                    $("#UITemplatesBox").block({ message: "Loading data...", fadeIn: 300 });
                },
                success: function (uiTemplates) {
                    $.timer(300, function () {
                        var uiTemplatesTable = $("#UITemplatesTable");
                        var headerColumns = $(uiTemplatesTable).find("th");
                        var tbody = $(uiTemplatesTable).children("tbody");

                        //Create a TR for each row 
                        for (var i = 0; i < uiTemplates.length; i++) {
                            createRow(headerColumns, tbody, uiTemplates[i], entryLinkUrl, deleteUITemplate);
                        }

                        $("#UITemplatesBox").unblock();
                    });
                }
            });

        });
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    </script>
}
<div id="UITemplatesActionsBox" class="RoundedBox">
    <div class="BoxHeader">
        <div class="BoxInnerHeader">
            <span class="HeaderLabel">Actions</span>
        </div>
    </div>
    <div class="BoxContent">
        <ul class="ActionList">
            <li class="Button-Normal" id="NewUITemplateButton">
                <img src="../../Content/themes/base/images/Icons/NewModel.png" />
                <span>New UITemplate</span> </li>
        </ul>
    </div>
    <div class="BoxFooter">
        <div class="BoxInnerFooter">
        </div>
    </div>
</div>
<div id="UITemplatesBox" class="RoundedBox">
    <div class="BoxHeader">
        <div class="BoxInnerHeader">
            <span class="HeaderLabel">UI Templates</span>
        </div>
    </div>
    <div class="BoxContent">
        <table cellpadding="0" cellspacing="0" id="UITemplatesTable" class="grid">
            <thead>
                <tr>
                    <th style="width: 60%; padding-left: 15px;">
                        <span columnname="Name">Name</span>
                    </th>
                    <th style="width: 20%; text-align: center">
                        <span columnname="LastModifiedDateFormatted">Modified Date</span>
                    </th>
                    <th style="width: 20%; text-align: center">
                        <span columnname="CreatedDateFormatted">Created Date</span>
                    </th>
                    <th style="text-align: center; padding-right: 15px;">
                        <span>Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="BoxFooter">
        <div class="BoxInnerFooter">
        </div>
    </div>
</div>
